<template>
	<div>
		<view class="wrap-technician-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex align-center just-between" @click="onDetail(item)">
					<view class="left flex column align-center just-center">
						<image class="avatar" :src="item.work_image" />

						<view class="service-status f-24">
							{{ item.is_service === 1 ? "可接单" : "已休息" }}
						</view>
					</view>

					<view class="center">
						<view class="c-a flex align-center">
							<view class="nickname f-32 fBold limit-num-line">
								{{ item.name }}
							</view>

							<view
								class="life f-20"
								v-if="item.images.length > 0"
								@click.stop="$filters.onPreviewImage(item.images, 0)"
							>
								生活照
							</view>
						</view>

						<view class="c-b flex align-center">
							<image class="star" :src="getImageURL('home/star.png')" />

							<view class="score f-20">
								{{ item.star }}
							</view>

							<view class="num f-20"> 已服务{{ item.total_sales }}单 </view>
						</view>

						<view class="c-c flex align-center">
							<image :src="getImageURL('home/location.png')" />
							<view class="f-24">{{ item.distance }}</view>
						</view>

						<view class="c-d flex align-center">
							<view class="flex align-center f-26">
								<image class="details-img" :src="getImageURL('home/details.png')" />
								<view class="details-text">详情</view>
							</view>

							<view class="evaluate-bg flex align-center f-26" @click.stop="onShowEvaluate(item)">
								<image class="evaluate-img" :src="getImageURL('home/eveluate.png')" />
								<view class="evaluate-text">
									{{ item.coumment }}
								</view>
							</view>

							<view class="like-bg flex align-center f-26">
								<image
									class="like-img"
									v-if="item.is_like == 1"
									:src="getImageURL('home/like_select.png')"
								/>

								<image class="like-img" v-else :src="getImageURL('home/like_normal.png')" />
								<view class="like-text">
									{{ item.like_num }}
								</view>
							</view>
						</view>
					</view>

					<view class="right flex column align-center just-center">
						<view class="time-bg">
							<view class="aa f-24">最早可约</view>
							<view class="bb f-24"> 时间{{ item.subscribe }} </view>
						</view>

						<view class="yy-btn f-20" @click.stop="onAppointment(item)"> 预约TA </view>
					</view>
				</view>
			</block>
		</view>

		<uEmpty v-if="list.length === 0" />

		<evaluatePop :isShow.sync="isShowEvaluate" :technicianID="evaluateTechnicianID" />
	</div>
</template>

<script>
	import evaluatePop from "./evaluate.vue";
	export default {
		components: {
			evaluatePop,
		},
		props: {
			/**
			 * 服务ID
			 */
			serviceID: {
				type: String,
				default: "",
			},
			/**
			 * 列表
			 */
			list: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				isShowEvaluate: false, //显示评论
				evaluateTechnicianID: "", // 技师ID
			};
		},
		methods: {
			/**
			 * 技师评价
			 */
			onShowEvaluate(item) {
				this.evaluateTechnicianID = item.id.toString();
				this.isShowEvaluate = true;
			},
			/**
			 * 技师详情
			 */
			onDetail(item) {
				uni.navigateTo({
					url: `/subPages/home/technicianDetail?technicianID=${item.id}&serviceID=${this.serviceID}`,
				});
			},
			/**
			 * 预约
			 */
			onAppointment(item) {
				if (item.is_service != 1) {
					return;
				}
				this.$filters.goConfirmOrder(item.id, this.serviceID);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-technician-list {
		width: 100%;
		overflow: hidden;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: hidden;

		.item {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
			background-color: white;
			border-radius: 20rpx;
			padding: 30rpx 30rpx 30rpx 20rpx;
			box-sizing: border-box;

			.left {
				overflow: hidden;

				.avatar {
					width: 126rpx;
					height: 126rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.service-status {
					margin-top: 8rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 18rpx;
					overflow: hidden;
					padding: 0 18rpx;
					background: $time-grad-color;
					color: $time-title-color;
				}
			}

			.center {
				margin-left: 22rpx;
				margin-right: 20rpx;
				flex: 1;
				overflow: hidden;

				.c-a {
					width: 100%;
					overflow: hidden;

					.nickname {
						--limit-num: 1;
						color: $title-color;
					}

					.life {
						margin-left: 10rpx;
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						border: 2rpx solid $theme-color;
						border-radius: 8rpx;
						overflow: hidden;
						padding: 0 16rpx;
						color: $theme-color;
					}
				}

				.c-b {
					margin-top: 18rpx;
					width: 100%;
					overflow: hidden;

					.star {
						width: 25rpx;
						height: 25rpx;
					}
					.score {
						margin-left: 5rpx;
						height: 25rpx;
						line-height: 25rpx;
						text-align: center;
						color: #f98e35;
					}
					.num {
						margin-left: 12rpx;
						height: 25rpx;
						line-height: 25rpx;
						text-align: center;
						color: #666666;
					}
				}

				.c-c {
					margin-top: 15rpx;
					width: 100%;
					overflow: hidden;

					> image {
						width: 24rpx;
						height: 28rpx;
					}
					> view {
						margin-left: 16rpx;
						color: #666666;
					}
				}

				.c-d {
					margin-top: 15rpx;
					width: 100%;
					overflow: hidden;
					color: #999999;

					.details-img {
						width: 30rpx;
						height: 30rpx;
					}
					.details-text {
						margin-left: 10rpx;
					}

					.evaluate-bg {
						margin-left: 20rpx;

						.evaluate-img {
							width: 31rpx;
							height: 30rpx;
						}
						.evaluate-text {
							margin-left: 10rpx;
						}
					}

					.like-bg {
						margin-left: 20rpx;

						.like-img {
							width: 31rpx;
							height: 31rpx;
						}
						.like-text {
							margin-left: 10rpx;
						}
					}
				}
			}

			.right {
				overflow: hidden;

				.time-bg {
					width: 130rpx;
					height: 80rpx;
					border-radius: 10rpx;
					overflow: hidden;
					border: 2rpx solid $theme-color;

					.aa {
						width: 130rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						background: $grad-theme-color;
						color: $bg-text-color;
						overflow: hidden;
					}

					.bb {
						width: 130rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						color: $theme-color;
						overflow: hidden;
					}
				}

				.yy-btn {
					margin-top: 34rpx;
					width: 130rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					overflow: hidden;
					border-radius: 25rpx;
					background: $grad-theme-color;
					color: $bg-text-color;
				}
			}
		}
	}
</style>
